റിയാക്ട് കോൺടെക്സ്റ്റ് ഒപ്റ്റിമൈസേഷൻ: സെലക്ടർ പാറ്റേണും പ്രകടനവും

പ്രോപ് ഡ੍ਰില്ലിംഗ് ആവശ്യമില്ലാതെ ആപ്ലിക്കേഷൻ സ്റ്റേറ്റ് കൈകാര്യം ചെയ്യുന്നതിനും ഘടകങ്ങൾക്കിടയിൽ ഇത് പങ്കിടുന്നതിനും റിയാക്ട് കോൺടെക്സ്റ്റ് ശക്തമായ ഒരു സംവിധാനം നൽകുന്നു. എന്നിരുന്നാലും, കോൺടെക്സ്റ്റിൻ്റെ നിഷ്കളങ്കമായ നടപ്പാക്കലുകൾ പ്രകടനത്തിൽ തടസ്സമുണ്ടാക്കും, പ്രത്യേകിച്ച് വലിയതും സങ്കീർണ്ണവുമായ ആപ്ലിക്കേഷനുകളിൽ. കോൺടെക്സ്റ്റ് മൂല്യം ഓരോ തവണയും മാറുമ്പോൾ, ആ കോൺടെക്സ്റ്റ് ഉപയോഗിക്കുന്ന എല്ലാ ഘടകങ്ങളും വീണ്ടും റെൻഡർ ചെയ്യും, അവർ ഡാറ്റയുടെ ചെറിയ ഭാഗത്തെ ആശ്രയിക്കുന്നുണ്ടെങ്കിൽ പോലും.

റിയാക്ട് കോൺടെക്സ്റ്റ് പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള ഒരു തന്ത്രമായി സെലക്ടർ പാറ്റേൺ ഈ ലേഖനത്തിൽ വിശദീകരിക്കുന്നു. ഇത് എങ്ങനെ പ്രവർത്തിക്കുമെന്നും, ഇതിൻ്റെ നേട്ടങ്ങളെക്കുറിച്ചും, ഇതിൻ്റെ ഉപയോഗം വ്യക്തമാക്കുന്നതിനുള്ള പ്രായോഗിക ഉദാഹരണങ്ങളും നമ്മൾ ഇവിടെ നൽകുന്നു. അനുബന്ധ പ്രകടന പരിഗണനകളും മറ്റ് ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകളും നമ്മൾ ചർച്ച ചെയ്യും.

പ്രശ്നം മനസ്സിലാക്കുക: ആവശ്യമില്ലാത്ത വീണ്ടും റെൻഡർ ചെയ്യൽ

കോൺടെക്സ്റ്റ് മൂല്യം മാറുമ്പോഴെല്ലാം, റിയാക്ടിൻ്റെ കോൺടെക്സ്റ്റ് API, എല്ലാ ഉപയോഗിക്കുന്ന ഘടകങ്ങളും വീണ്ടും റെൻഡർ ചെയ്യാൻ കാരണമാകുന്നു എന്നതാണ് ഇതിലെ പ്രധാന പ്രശ്നം. ഉപയോക്തൃ പ്രൊഫൈൽ ഡാറ്റ, തീം ക്രമീകരണങ്ങൾ, ആപ്ലിക്കേഷൻ കോൺഫിഗറേഷൻ എന്നിവ അടങ്ങിയ വലിയൊരു ഒബ്ജക്റ്റ് നിങ്ങളുടെ കോൺടെക്സ്റ്റിൽ ഹോൾഡ് ചെയ്യുന്നു എന്ന് കരുതുക. ഉപയോക്തൃ പ്രൊഫൈലിനുള്ളിലെ ഒരു പ്രോപ്പർട്ടി നിങ്ങൾ അപ്‌ഡേറ്റ് ചെയ്യുകയാണെങ്കിൽ, തീം ക്രമീകരണങ്ങളെ മാത്രം ആശ്രയിക്കുന്ന ഘടകങ്ങൾ പോലും വീണ്ടും റെൻഡർ ചെയ്യും.

സങ്കീർണ്ണമായ ഘടക ശ്രേണികളും, കോൺടെക്സ്റ്റ് അപ്‌ഡേറ്റുകളും കൂടെ കൂടെ ഉണ്ടാകുമ്പോൾ ഇത് കാര്യമായ പ്രകടനത്തകർച്ചയിലേക്ക് നയിച്ചേക്കാം. ആവശ്യമില്ലാത്ത വീണ്ടും റെൻഡർ ചെയ്യുന്നത് വിലപ്പെട്ട CPU സൈക്കിളുകൾ പാഴാക്കുകയും, ഉപയോക്തൃ ഇൻ്റർഫേസുകൾ മന്ദഗതിയിലാകാൻ കാരണമാവുകയും ചെയ്യും.

സെലക്ടർ പാറ്റേൺ: ടാർഗെറ്റുചെയ്‌ത അപ്‌ഡേറ്റുകൾ

കോൺടെക്സ്റ്റ് മൂല്യത്തിന്റെ നിർദ്ദിഷ്ട ഭാഗങ്ങളിൽ മാത്രം സബ്‌സ്‌ക്രൈബ് ചെയ്യാൻ ഘടകങ്ങളെ അനുവദിക്കുന്നതിലൂടെ സെലക്ടർ പാറ്റേൺ ഒരു പരിഹാരം നൽകുന്നു. മുഴുവൻ കോൺടെക്സ്റ്റും ഉപയോഗിക്കുന്നതിനുപകരം, പ്രസക്തമായ ഡാറ്റ എക്‌സ്‌ട്രാക്റ്റ് ചെയ്യാൻ ഘടകങ്ങൾ സെലക്ടർ ഫംഗ്‌ഷനുകൾ ഉപയോഗിക്കുന്നു. ഇത് വീണ്ടും റെൻഡർ ചെയ്യുന്നതിനുള്ള സ്കോപ്പ് കുറയ്ക്കുകയും, മാറിയ ഡാറ്റയെ ആശ്രയിക്കുന്ന ഘടകങ്ങൾ മാത്രം അപ്‌ഡേറ്റ് ചെയ്യപ്പെടുന്നു എന്ന് ഉറപ്പാക്കുകയും ചെയ്യുന്നു.

ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നു:

1. കോൺടെക്സ്റ്റ് പ്രൊവൈഡർ: ആപ്ലിക്കേഷൻ സ്റ്റേറ്റ് കോൺടെക്സ്റ്റ് പ്രൊവൈഡർ കൈവശം വയ്ക്കുന്നു.
2. സെലക്ടർ ഫംഗ്‌ഷനുകൾ: ഇവ കോൺടെക്സ്റ്റ് മൂല്യത്തെ ഇൻപുട്ടായി എടുത്ത് ഒരു ഡെറൈവ്ഡ് വാല്യു നൽകുന്ന ശുദ്ധമായ ഫംഗ്‌ഷനുകളാണ്. കോൺടെക്സ്റ്റിൽ നിന്ന് ഡാറ്റയുടെ പ്രത്യേക ഭാഗങ്ങൾ വേർതിരിച്ചെടുക്കുന്ന ഫിൽട്ടറുകളായി അവ പ്രവർത്തിക്കുന്നു.
3. ഉപയോഗിക്കുന്ന ഘടകങ്ങൾ: ഒരു സെലക്ടർ ഫംഗ്‌ഷൻ്റെ ഔട്ട്‌പുട്ടിലേക്ക് സബ്‌സ്‌ക്രൈബ് ചെയ്യാൻ ഘടകങ്ങൾ ഒരു കസ്റ്റം ഹുക്ക് (സാധാരണയായി `useContextSelector` എന്ന് പേരിട്ടിരിക്കുന്നു) ഉപയോഗിക്കുന്നു. തിരഞ്ഞെടുത്ത ഡാറ്റയിലെ മാറ്റങ്ങൾ കണ്ടെത്തുന്നതിനും ആവശ്യമുള്ളപ്പോൾ മാത്രം വീണ്ടും റെൻഡർ ചെയ്യുന്നതിനും ഈ ഹുക്ക് ഉത്തരവാദിയാണ്.

സെലക്ടർ പാറ്റേൺ നടപ്പിലാക്കുന്നു

സെലക്ടർ പാറ്റേൺ നടപ്പിലാക്കുന്നതിൻ്റെ ഒരു അടിസ്ഥാന ഉദാഹരണം ഇതാ:

1. കോൺടെക്സ്റ്റ് ഉണ്ടാക്കുന്നു

ആദ്യം, നമ്മുടെ കോൺടെക്സ്റ്റ് നിർവചിക്കാം. ഒരു ഉപയോക്താവിൻ്റെ പ്രൊഫൈലും തീം ക്രമീകരണങ്ങളും കൈകാര്യം ചെയ്യുന്ന ഒരു കോൺടെക്സ്റ്റ് നമുക്ക് സങ്കൽപ്പിക്കാം.

            import React, { createContext, useState, useContext } from 'react';

const AppContext = createContext({});

const AppProvider = ({ children }) => {
  const [user, setUser] = useState({
    name: 'John Doe',
    email: 'john.doe@example.com',
    location: 'New York'
  });
  const [theme, setTheme] = useState({
    primaryColor: '#007bff',
    secondaryColor: '#6c757d'
  });

  const updateUserName = (name) => {
    setUser(prevUser => ({ ...prevUser, name }));
  };

  const updateThemeColor = (primaryColor) => {
    setTheme(prevTheme => ({ ...prevTheme, primaryColor }));
  };

  const value = {
    user,
    theme,
    updateUserName,
    updateThemeColor
  };

  return (
    
      {children}
    
  );
};

export { AppContext, AppProvider };
            

              
                Copy
              
            
          

2. സെലക്ടർ ഫംഗ്‌ഷനുകൾ ഉണ്ടാക്കുന്നു

അടുത്തതായി, കോൺടെക്സ്റ്റിൽ നിന്ന് ആവശ്യമുള്ള ഡാറ്റ എക്‌സ്‌ട്രാക്റ്റ് ചെയ്യാൻ സെലക്ടർ ഫംഗ്‌ഷനുകൾ നിർവചിക്കുന്നു. ഉദാഹരണത്തിന്:

            const selectUserName = (context) => context.user.name;
const selectPrimaryColor = (context) => context.theme.primaryColor;

            

              
                Copy
              
            
          

3. ഒരു കസ്റ്റം ഹുക്ക് ഉണ്ടാക്കുന്നു (`useContextSelector`)

സെലക്ടർ പാറ്റേണിൻ്റെ കാതലാണ് ഇത്. `useContextSelector` എന്ന ഹുക്ക് ഒരു സെലക്ടർ ഫംഗ്‌ഷനെ ഇൻപുട്ടായി എടുക്കുകയും തിരഞ്ഞെടുത്ത മൂല്യം നൽകുകയും ചെയ്യുന്നു. ഇത് കോൺടെക്സ്റ്റിലേക്കുള്ള സബ്‌സ്‌ക്രിപ്‌ഷൻ കൈകാര്യം ചെയ്യുകയും തിരഞ്ഞെടുത്ത മൂല്യം മാറുമ്പോൾ മാത്രം വീണ്ടും റെൻഡർ ചെയ്യുകയും ചെയ്യുന്നു.

            import { useContext, useState, useEffect, useRef } from 'react';

const useContextSelector = (context, selector) => {
  const [selected, setSelected] = useState(() => selector(useContext(context)));
  const latestSelector = useRef(selector);
  const contextValue = useContext(context);

  useEffect(() => {
    latestSelector.current = selector;
  });

  useEffect(() => {
    const nextSelected = latestSelector.current(contextValue);
    if (!Object.is(selected, nextSelected)) {
      setSelected(nextSelected);
    }
  }, [contextValue]);

  return selected;
};

export default useContextSelector;

            

              
                Copy
              
            
          

വിശദീകരണം:

• `useState`: സെലക്ടർ നൽകുന്ന പ്രാരംഭ മൂല്യം ഉപയോഗിച്ച് `selected` ആരംഭിക്കുക.
• `useRef`: ഏറ്റവും പുതിയ `selector` ഫംഗ്‌ഷൻ സംഭരിക്കുക, കോംപോണൻ്റ് വീണ്ടും റെൻഡർ ചെയ്യുകയാണെങ്കിൽ പോലും ഏറ്റവും കാലികമായ സെലക്ടർ ഉപയോഗിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.
• `useContext`: നിലവിലെ കോൺടെക്സ്റ്റ് മൂല്യം നേടുക.
• `useEffect`: `contextValue` മാറുമ്പോഴെല്ലാം ഈ ഇഫക്റ്റ് പ്രവർത്തിക്കും. ഇതിനുള്ളിൽ, `latestSelector` ഉപയോഗിച്ച് തിരഞ്ഞെടുത്ത മൂല്യം വീണ്ടും കണക്കാക്കുന്നു. പുതിയ തിരഞ്ഞെടുത്ത മൂല്യം നിലവിലെ `selected` മൂല്യത്തിൽ നിന്ന് വ്യത്യസ്തമാണെങ്കിൽ (`Object.is` ഉപയോഗിച്ച് ആഴത്തിലുള്ള താരതമ്യം), `selected` സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യുകയും, വീണ്ടും റെൻഡർ ചെയ്യാൻ കാരണമാവുകയും ചെയ്യും.

4. ഘടകങ്ങളിൽ കോൺടെക്സ്റ്റ് ഉപയോഗിക്കുന്നു

ഇപ്പോൾ, കോൺടെക്സ്റ്റിൻ്റെ പ്രത്യേക ഭാഗങ്ങളിലേക്ക് സബ്‌സ്‌ക്രൈബ് ചെയ്യാൻ ഘടകങ്ങൾക്ക് `useContextSelector` ഹുക്ക് ഉപയോഗിക്കാം:

            import React from 'react';
import { AppContext, AppProvider } from './AppContext';
import useContextSelector from './useContextSelector';

const UserName = () => {
  const userName = useContextSelector(AppContext, selectUserName);

  return 
User Name: {userName}
;
};

const ThemeColorDisplay = () => {
  const primaryColor = useContextSelector(AppContext, selectPrimaryColor);

  return 
Theme Color: {primaryColor}
;
};

const App = () => {
  return (
    
      
      
    
  );
};

export default App;

            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, ഉപയോക്താവിൻ്റെ പേര് മാറുമ്പോൾ മാത്രം `UserName` വീണ്ടും റെൻഡർ ചെയ്യും, പ്രാഥമിക നിറം മാറുമ്പോൾ മാത്രം `ThemeColorDisplay` വീണ്ടും റെൻഡർ ചെയ്യും. ഉപയോക്താവിൻ്റെ ഇമെയിലോ ലൊക്കേഷനോ മാറ്റുന്നത് `ThemeColorDisplay`-യെ വീണ്ടും റെൻഡർ ചെയ്യാൻ കാരണമാകില്ല, തിരിച്ചും സംഭവിക്കില്ല.

സെലക്ടർ പാറ്റേണിൻ്റെ നേട്ടങ്ങൾ

• കുറഞ്ഞ വീണ്ടും റെൻഡറുകൾ: ആവശ്യമില്ലാത്ത വീണ്ടും റെൻഡറുകൾ ഗണ്യമായി കുറയ്ക്കുക എന്നതാണ് ഇതിൻ്റെ പ്രധാന നേട്ടം, ഇത് പ്രകടനം മെച്ചപ്പെടുത്തുന്നു.
• മെച്ചപ്പെട്ട പ്രകടനം: വീണ്ടും റെൻഡറുകൾ കുറയ്ക്കുന്നതിലൂടെ, ആപ്ലിക്കേഷൻ കൂടുതൽ പ്രതികരിക്കുന്നതും കാര്യക്ഷമവുമാകുന്നു.
• കോഡ് വ്യക്തത: കോംപോണൻ്റുകളുടെ ഡാറ്റാ ഡിപ്പൻഡൻസികൾ വ്യക്തമായി നിർവചിക്കുന്നതിലൂടെ സെലക്ടർ ഫംഗ്‌ഷനുകൾ കോഡ് വ്യക്തതയും മെയിന്റനബിലിറ്റിയും പ്രോത്സാഹിപ്പിക്കുന്നു.
• പരിശോധനാ ശേഷി: സെലക്ടർ ഫംഗ്‌ഷനുകൾ ശുദ്ധമായ ഫംഗ്‌ഷനുകളാണ്, ഇത് അവയെ പരിശോധിക്കാനും മനസ്സിലാക്കാനും എളുപ്പമാക്കുന്നു.

പരിഗണനകളും ഒപ്റ്റിമൈസേഷനുകളും

1. മെമ്മോയിസേഷൻ

സെലക്ടർ ഫംഗ്‌ഷനുകളുടെ പ്രകടനം കൂടുതൽ മെച്ചപ്പെടുത്താൻ മെമ്മോയിസേഷന് കഴിയും. ഇൻപുട്ട് കോൺടെക്സ്റ്റ് മൂല്യം മാറിയിട്ടില്ലെങ്കിൽ, സെലക്ടർ ഫംഗ്‌ഷന് കാഷെ ചെയ്ത ഒരു ഫലം നൽകാൻ കഴിയും, ഇത് ആവശ്യമില്ലാത്ത കണക്കുകൂട്ടലുകൾ ഒഴിവാക്കുന്നു. വിലകൂടിയ കണക്കുകൂട്ടലുകൾ നടത്തുന്ന സങ്കീർണ്ണമായ സെലക്ടർ ഫംഗ്‌ഷനുകൾക്ക് ഇത് വളരെ ഉപയോഗപ്രദമാണ്.

തിരഞ്ഞെടുത്ത മൂല്യം മെമ്മോയിസ് ചെയ്യാൻ നിങ്ങളുടെ `useContextSelector` നടപ്പിലാക്കുന്നതിലൂടെ നിങ്ങൾക്ക് `useMemo` ഹുക്ക് ഉപയോഗിക്കാം. ഇത് മറ്റൊരു ഒപ്റ്റിമൈസേഷൻ ലെയർ ചേർക്കുന്നു, കോൺടെക്സ്റ്റ് മൂല്യം മാറുമ്പോൾ പോലും, തിരഞ്ഞെടുത്ത മൂല്യം അതേപടി നിലനിൽക്കുകയാണെങ്കിൽ പോലും, ആവശ്യമില്ലാത്ത വീണ്ടും റെൻഡറുകൾ തടയുന്നു. മെമ്മോയിസേഷനോടുകൂടിയ ഒരു അപ്‌ഡേറ്റ് ചെയ്ത `useContextSelector` ഇതാ:

            import { useContext, useState, useEffect, useRef, useMemo } from 'react';

const useContextSelector = (context, selector) => {
  const latestSelector = useRef(selector);
  const contextValue = useContext(context);

  useEffect(() => {
    latestSelector.current = selector;
  }, [selector]);

  const selected = useMemo(() => latestSelector.current(contextValue), [contextValue]);

  return selected;
};

export default useContextSelector;

            

              
                Copy
              
            
          

2. ഒബ്ജക്റ്റ് ഇമ്മ്യൂട്ടബിലിറ്റി

സെലക്ടർ പാറ്റേൺ ശരിയായി പ്രവർത്തിക്കുന്നതിന് കോൺടെക്സ്റ്റ് മൂല്യത്തിൻ്റെ ഇമ്മ്യൂട്ടബിലിറ്റി ഉറപ്പാക്കേണ്ടത് അത്യാവശ്യമാണ്. കോൺടെക്സ്റ്റ് മൂല്യം നേരിട്ട് മാറ്റുകയാണെങ്കിൽ, സെലക്ടർ ഫംഗ്‌ഷനുകൾ മാറ്റങ്ങൾ കണ്ടെത്തിയേക്കില്ല, ഇത് തെറ്റായ റെൻഡറിംഗിലേക്ക് നയിച്ചേക്കാം. കോൺടെക്സ്റ്റ് മൂല്യം അപ്‌ഡേറ്റ് ചെയ്യുമ്പോൾ എപ്പോഴും പുതിയ ഒബ്‌ജക്റ്റുകളോ അറേകളോ ഉണ്ടാക്കുക.

3. ഡീപ് താരതമ്യങ്ങൾ

`useContextSelector` ഹുക്ക് തിരഞ്ഞെടുത്ത മൂല്യങ്ങൾ താരതമ്യം ചെയ്യാൻ `Object.is` ഉപയോഗിക്കുന്നു. ഇത് ഒരു ലളിതമായ താരതമ്യം നടത്തുന്നു. സങ്കീർണ്ണമായ ഒബ്‌ജക്റ്റുകൾക്കായി, മാറ്റങ്ങൾ കൃത്യമായി കണ്ടെത്താൻ നിങ്ങൾ ഒരു ഡീപ് താരതമ്യ ഫംഗ്‌ഷൻ ഉപയോഗിക്കേണ്ടി വന്നേക്കാം. എന്നിരുന്നാലും, ഡീപ് താരതമ്യങ്ങൾ കമ്പ്യൂട്ടേഷണൽ ആയി വളരെ ചെലവേറിയതാകാം, അതിനാൽ അവ വിവേകത്തോടെ ഉപയോഗിക്കുക.

4. `Object.is`-നുമുള്ള ബദലുകൾ

`Object.is` മതിയാകാത്തപ്പോൾ (ഉദാഹരണത്തിന്, നിങ്ങളുടെ കോൺടെക്സ്റ്റിൽ ആഴത്തിൽ നെസ്റ്റഡ് ഒബ്‌ജക്റ്റുകൾ ഉണ്ട്), ബദലുകൾ പരിഗണിക്കുക. `lodash` പോലുള്ള ലൈബ്രറികൾ ഡീപ് താരതമ്യത്തിനായി `_.isEqual` വാഗ്ദാനം ചെയ്യുന്നു, എന്നാൽ പ്രകടനത്തിലുണ്ടാകുന്ന ആഘാതത്തെക്കുറിച്ച് ബോധവാന്മാരായിരിക്കുക. ചില സാഹചര്യങ്ങളിൽ, ഇമ്മ്യൂട്ടബിൾ ഡാറ്റാ സ്ട്രക്ചറുകൾ (ഇമ്മർ പോലുള്ളവ) ഉപയോഗിക്കുന്ന ഘടനാപരമായ പങ്കിടൽ ടെക്നിക്കുകൾ സഹായകമാകും, കാരണം അവ യഥാർത്ഥ ഒബ്‌ജക്റ്റിനെ മാറ്റാതെ തന്നെ നെസ്റ്റഡ് ഒബ്‌ജക്റ്റ് മാറ്റാൻ നിങ്ങളെ അനുവദിക്കുന്നു, കൂടാതെ അവയെ പലപ്പോഴും `Object.is` ഉപയോഗിച്ച് താരതമ്യം ചെയ്യാൻ കഴിയും.

5. സെലക്ടറുകൾക്കായി `useCallback`

ശരിയായി മെമ്മോയിസ് ചെയ്തില്ലെങ്കിൽ `selector` ഫംഗ്‌ഷൻ തന്നെ ആവശ്യമില്ലാത്ത വീണ്ടും റെൻഡറുകളുടെ ഉറവിടമാകാം. അതിൻ്റെ ഡിപ്പൻഡൻസികൾ മാറുമ്പോൾ മാത്രം ഇത് വീണ്ടും സൃഷ്ടിക്കപ്പെടുന്നു എന്ന് ഉറപ്പാക്കാൻ `selector` ഫംഗ്‌ഷൻ `useCallback`-ലേക്ക് നൽകുക. ഇത് കസ്റ്റം ഹുക്കിലേക്കുള്ള അനാവശ്യമായ അപ്‌ഡേറ്റുകൾ തടയുന്നു.

            const UserName = () => {
  const userName = useContextSelector(AppContext, useCallback(selectUserName, []));

  return 
User Name: {userName}
;
};

            

              
                Copy
              
            
          

6. `use-context-selector` പോലുള്ള ലൈബ്രറികൾ ഉപയോഗിക്കുന്നു

`use-context-selector` പോലുള്ള ലൈബ്രറികൾ പ്രകടനത്തിനായി ഒപ്റ്റിമൈസ് ചെയ്തതും ലളിതമായ താരതമ്യം പോലുള്ള ഫീച്ചറുകൾ ഉൾക്കൊള്ളുന്നതുമായ ഒരു പ്രീ-ബിൽറ്റ് `useContextSelector` ഹുക്ക് നൽകുന്നു. അത്തരം ലൈബ്രറികൾ ഉപയോഗിക്കുന്നത് നിങ്ങളുടെ കോഡ് ലളിതമാക്കാനും തെറ്റുകൾ ഉണ്ടാകാനുള്ള സാധ്യത കുറയ്ക്കാനും സഹായിക്കും.

            import { useContextSelector } from 'use-context-selector';
import { AppContext } from './AppContext';

const UserName = () => {
  const userName = useContextSelector(AppContext, selectUserName);

  return 
User Name: {userName}
;
};

            

              
                Copy
              
            
          

ആഗോള ഉദാഹരണങ്ങളും മികച്ച രീതികളും

ആഗോള ആപ്ലിക്കേഷനുകളിലെ വിവിധ ഉപയോഗ കേസുകളിൽ സെലക്ടർ പാറ്റേൺ ബാധകമാണ്:

• സ്ഥാനീകരണം: ഒന്നിലധികം ഭാഷകളെ പിന്തുണയ്ക്കുന്ന ഒരു ഇ-കൊമേഴ്‌സ് പ്ലാറ്റ്‌ഫോം സങ്കൽപ്പിക്കുക. കോൺടെക്സ്റ്റ് നിലവിലെ ലൊക്കാലും വിവർത്തനങ്ങളും ഹോൾഡ് ചെയ്യാൻ കഴിയും. ടെക്‌സ്‌റ്റ് പ്രദർശിപ്പിക്കുന്ന ഘടകങ്ങൾക്ക് നിലവിലെ ലൊക്കാലിനായുള്ള പ്രസക്തമായ വിവർത്തനം എക്‌സ്‌ട്രാക്റ്റ് ചെയ്യാൻ സെലക്ടറുകൾ ഉപയോഗിക്കാം.
• തീം മാനേജ്മെൻ്റ്: ഒരു സോഷ്യൽ മീഡിയ ആപ്ലിക്കേഷൻ ഉപയോക്താക്കൾക്ക് തീം ഇഷ്ടമുള്ള രീതിയിൽ ക്രമീകരിക്കാൻ അനുവദിക്കും. കോൺടെക്സ്റ്റിന് തീം ക്രമീകരണങ്ങൾ സംഭരിക്കാൻ കഴിയും, കൂടാതെ UI ഘടകങ്ങൾ പ്രദർശിപ്പിക്കുന്ന ഘടകങ്ങൾക്ക് പ്രസക്തമായ തീം പ്രോപ്പർട്ടികൾ (ഉദാഹരണത്തിന്, നിറങ്ങൾ, ഫോണ്ടുകൾ) എക്‌സ്‌ട്രാക്റ്റ് ചെയ്യാൻ സെലക്ടറുകൾ ഉപയോഗിക്കാം.
• അധികാരസ്ഥാനം: ഒരു ആഗോള സംരംഭ ആപ്ലിക്കേഷന് ഉപയോക്തൃ പ്രാമാണീകരണ നിലയും അനുമതികളും കൈകാര്യം ചെയ്യാൻ കോൺടെക്സ്റ്റ് ഉപയോഗിക്കാൻ കഴിയും. നിലവിലെ ഉപയോക്താവിന് പ്രത്യേക ഫീച്ചറുകളിലേക്ക് പ്രവേശനം ഉണ്ടോ എന്ന് നിർണ്ണയിക്കാൻ ഘടകങ്ങൾക്ക് സെലക്ടറുകൾ ഉപയോഗിക്കാൻ കഴിയും.
• ഡാറ്റാ ഫെച്ചിംഗ് സ്റ്റാറ്റസ്: പല ആപ്ലിക്കേഷനുകളും ലോഡിംഗ് സ്റ്റേറ്റുകൾ പ്രദർശിപ്പിക്കുന്നു. API കോളുകളുടെ നില കൈകാര്യം ചെയ്യാൻ ഒരു കോൺടെക്സ്റ്റിന് കഴിയും, കൂടാതെ പ്രത്യേക എൻഡ്‌പോയിന്റുകളുടെ ലോഡിംഗ് സ്റ്റേറ്റിലേക്ക് ഘടകങ്ങൾക്ക് തിരഞ്ഞെടുത്ത് സബ്‌സ്‌ക്രൈബ് ചെയ്യാൻ കഴിയും. ഉദാഹരണത്തിന്, ഒരു ഉപയോക്തൃ പ്രൊഫൈൽ പ്രദർശിപ്പിക്കുന്ന ഒരു ഘടകം `GET /user/:id` എൻഡ്‌പോയിൻ്റിൻ്റെ ലോഡിംഗ് സ്റ്റേറ്റിലേക്ക് മാത്രം സബ്‌സ്‌ക്രൈബ് ചെയ്തേക്കാം.

ഇതര ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകൾ

സെലക്ടർ പാറ്റേൺ ഒരു ശക്തമായ ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കാണെങ്കിലും, ഇത് ലഭ്യമായ ഒരേയൊരു ഉപകരണം മാത്രമല്ല. ഈ ബദലുകൾ പരിഗണിക്കുക:

• `React.memo`: പ്രോപ്‌സുകൾ മാറിയിട്ടില്ലെങ്കിൽ വീണ്ടും റെൻഡർ ചെയ്യുന്നത് തടയാൻ `React.memo` ഉപയോഗിച്ച് ഫംഗ്ഷണൽ ഘടകങ്ങൾ പൊതിയുക. പ്രോപ്‌സുകൾ നേരിട്ട് സ്വീകരിക്കുന്ന ഘടകങ്ങൾ ഒപ്റ്റിമൈസ് ചെയ്യാൻ ഇത് ഉപയോഗപ്രദമാണ്.
• `PureComponent`: വീണ്ടും റെൻഡർ ചെയ്യുന്നതിന് മുമ്പ് പ്രോപ്‌സുകളുടെയും സ്റ്റേറ്റിൻ്റെയും ലളിതമായ താരതമ്യം നടത്താൻ ക്ലാസ് ഘടകങ്ങൾക്കായി `PureComponent` ഉപയോഗിക്കുക.
• കോഡ് സ്പ്ലിറ്റിംഗ്: ആവശ്യാനുസരണം ലോഡ് ചെയ്യാവുന്ന ചെറിയ ഭാഗങ്ങളായി ആപ്ലിക്കേഷൻ വിഭജിക്കുക. ഇത് പ്രാരംഭ ലോഡ് സമയം കുറയ്ക്കുകയും മൊത്തത്തിലുള്ള പ്രകടനം മെച്ചപ്പെടുത്തുകയും ചെയ്യുന്നു.
• വിർച്ച്വലൈസേഷൻ: വലിയ ലിസ്റ്റ് ഡാറ്റ പ്രദർശിപ്പിക്കുന്നതിന്, ദൃശ്യമായ ഇനങ്ങൾ മാത്രം റെൻഡർ ചെയ്യാൻ വിർച്ച്വലൈസേഷൻ ടെക്നിക്കുകൾ ഉപയോഗിക്കുക. വലിയ ഡാറ്റാസെറ്റുകൾ കൈകാര്യം ചെയ്യുമ്പോൾ ഇത് പ്രകടനം വളരെയധികം മെച്ചപ്പെടുത്തുന്നു.

ഉപസംഹാരം

ആവശ്യമില്ലാത്ത വീണ്ടും റെൻഡറുകൾ കുറയ്ക്കുന്നതിലൂടെ റിയാക്ട് കോൺടെക്സ്റ്റ് പ്രകടനം ഒപ്റ്റിമൈസ് ചെയ്യുന്നതിനുള്ള ഒരു വിലപ്പെട്ട ടെക്നിക്കാണ് സെലക്ടർ പാറ്റേൺ. കോൺടെക്സ്റ്റ് മൂല്യത്തിന്റെ പ്രത്യേക ഭാഗങ്ങളിൽ മാത്രം സബ്‌സ്‌ക്രൈബ് ചെയ്യാൻ ഘടകങ്ങളെ അനുവദിക്കുന്നതിലൂടെ, ഇത് ആപ്ലിക്കേഷൻ പ്രതികരണശേഷിയും കാര്യക്ഷമതയും മെച്ചപ്പെടുത്തുന്നു. മെമ്മോയിസേഷനും കോഡ് സ്പ്ലിറ്റിംഗും പോലുള്ള മറ്റ് ഒപ്റ്റിമൈസേഷൻ ടെക്നിക്കുകളുമായി സംയോജിപ്പിച്ച്, സുഗമമായ ഉപയോക്തൃ അനുഭവം നൽകുന്ന ഉയർന്ന പ്രകടനമുള്ള റിയാക്ട് ആപ്ലിക്കേഷനുകൾ നിങ്ങൾക്ക് നിർമ്മിക്കാൻ കഴിയും. നിങ്ങളുടെ ആപ്ലിക്കേഷൻ്റെ പ്രത്യേക ആവശ്യകതകളെ അടിസ്ഥാനമാക്കി ശരിയായ ഒപ്റ്റിമൈസേഷൻ തന്ത്രം തിരഞ്ഞെടുക്കാനും ഉൾപ്പെട്ടിരിക്കുന്ന ട്രേഡ്-ഓഫുകൾ ശ്രദ്ധാപൂർവ്വം പരിഗണിക്കാനും ഓർമ്മിക്കുക.

സെലക്ടർ പാറ്റേണിനെക്കുറിച്ചുള്ള ഒരു സമഗ്രമായ ഗൈഡ് ഈ ലേഖനത്തിൽ നൽകുന്നു, അതിൻ്റെ നടപ്പാക്കൽ, നേട്ടങ്ങൾ, പരിഗണനകൾ എന്നിവ ഉൾപ്പെടെ. ഈ ലേഖനത്തിൽ നൽകിയിട്ടുള്ള മികച്ച രീതികൾ പിന്തുടരുന്നതിലൂടെ, നിങ്ങളുടെ റിയാക്ട് കോൺടെക്സ്റ്റ് ഉപയോഗം ഫലപ്രദമായി ഒപ്റ്റിമൈസ് ചെയ്യാനും ആഗോള പ്രേക്ഷകർക്കായി പ്രകടനം കാഴ്ചവയ്ക്കുന്ന ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാനും കഴിയും.